<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>支付页面</title>
  <style>
    /* Reset default browser styles */
    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow-x: hidden; /* Prevent horizontal scrollbar */
    }

    body {
        font-family: sans-serif;
        background-color: #f8f8f8;
        color: #333;
        display: flex;
        flex-direction: column;
    }
    .container {
        flex: 1; /* 让内容区域填充剩余空间 */
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%; /* 确保容器宽度为100% */
        padding: 0; /* 移除容器内边距 */
        box-sizing: border-box; /* 确保padding和border不会增加总宽度 */
        overflow-y: auto; /* 允许内容滚动 */
        padding-bottom: 120px; /* 为tabbar留出空间，与tabbar高度一致 */
    }

    /* Tabbar styles */
    .tabbar {
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 120px; /* Adjusted tabbar height */
        background-color: #fff;
        border-top: 1px solid #eee;
        box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
        z-index: 1000;
    }

    .tabbar-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        color: #666;
        text-decoration: none;
        font-size: 14px;
        padding: 5px 0;
    }

    .tabbar-item.active {
        color: #007bff; /* Active color */
    }

    .tabbar-item img {
        width: 40px;
        height: 40px;
        margin-bottom: 2px;
    }

    /* Specific styles for pay.html content */
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }

    .product-info {
        margin-top: 20px;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        background-color: #fff;
        width: 80%;
        max-width: 400px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .product-name {
        font-size: 18px;
        font-weight: bold;
        color: #333;
    }

    .product-price {
        font-size: 22px;
        color: #e60000;
        font-weight: bold;
    }

    .pay-button {
        background-color: #007bff;
        color: white;
        padding: 12px 25px;
        border: none;
        border-radius: 5px;
        font-size: 18px;
        cursor: pointer;
        margin-top: 30px;
        width: 80%;
        max-width: 400px;
    }

    .pay-button:hover {
        background-color: #0056b3;
    }

    .login-prompt {
        margin-top: 40px;
        padding: 20px;
        border: 1px solid #ffcc00;
        background-color: #fffacd;
        border-radius: 8px;
        text-align: center;
        width: 80%;
        max-width: 400px;
    }

    .login-prompt button {
        background-color: #28a745;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
        margin-top: 15px;
    }

    .login-prompt button:hover {
        background-color: #218838;
    }
  </style>
</head>
<body>
    <div class="container">
        <div class="content">
            <span>您已登录，OpenID: [此处显示OpenID]</span>
            <span>这里是支付页面的内容</span>
            
            <div class="product-info">
                <span class="product-name">示例商品</span>
                <span class="product-price">¥ 0.01</span>
            </div>
            
            <button class="pay-button">立即支付</button>
        </div>
        <div class="login-prompt">
            <span>请登录以进行支付操作</span>
            <button onclick="redirectToWeChatOAuth()">微信登录</button>
        </div>
    </div>

    <div class="tabbar">
        <a href="/rzwl/static/index.html" class="tabbar-item">
            <img src="/rzwl/static/images/tab_home.png" alt="首页">
            <span>首页</span>
        </a>
        <a href="/rzwl/static/enroll.html" class="tabbar-item">
            <img src="/rzwl/static/images/tab_enroll.png" alt="报名">
            <span>报名</span>
        </a>
        <a href="/rzwl/static/pay.html" class="tabbar-item active">
            <img src="/rzwl/static/images/tab_pay_active.png" alt="支付">
            <span>支付</span>
        </a>
        <a href="/rzwl/static/me.html" class="tabbar-item">
            <img src="/rzwl/static/images/tab_me.png" alt="我的">
            <span>我的</span>
        </a>
    </div>

    <script>
        async function checkLoginStatus() {
            const response = await fetch('/rzwl/check_login_status');
            const data = await response.json();
            if (!data.logged_in) {
                const currentPath = window.location.pathname + window.location.search;
                const redirectUri = encodeURIComponent(`${window.location.origin}/rzwl/wechat_oauth_callback`);
                const wechatOAuthUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=YOUR_WECHAT_APP_ID&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_base&state=${encodeURIComponent(currentPath)}#wechat_redirect`;
                window.location.href = wechatOAuthUrl;
            } else {
                // 用户已登录，可以显示 OpenID 或其他信息
                const openidSpan = document.querySelector('.content span:first-child');
                if (openidSpan) {
                    openidSpan.textContent = `您已登录，OpenID: ${data.openid}`;
                }
                const loginPrompt = document.querySelector('.login-prompt');
                if (loginPrompt) {
                    loginPrompt.style.display = 'none'; // 隐藏登录提示
                }
            }
        }

        async function redirectToWeChatOAuth() {
            const appidResponse = await fetch('/rzwl/get_wechat_appid');
            const appidData = await appidResponse.json();
            const appid = appidData.appid;

            const currentPath = window.location.pathname + window.location.search;
            // 获取不带端口的域名或IP
            const hostname = window.location.hostname;
            const redirectUri = encodeURIComponent(`${window.location.protocol}//${hostname}/rzwl/wechat_oauth_callback`);
            const wechatOAuthUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_base&state=${encodeURIComponent(currentPath)}#wechat_redirect`;
            window.location.href = wechatOAuthUrl;
        }

        // 页面加载时检查登录状态
        checkLoginStatus();
    </script>
</body>
</html>
